<template>
  <div class="container">
    <Headbar />
    <div class="banner-item">
      <div class="banner-bg1"></div>
      <div class="banner-bg2"></div>

      <div class="enter-item wow fadeInDown" data-wow-duration=".5s" @click="routeToOut(URL.jumpSeller+'/seller/enter/register?staffId='+staffId+'&isShow='+isShow)">
        <img src="~assets/images/merchants/pub-ico01.png"/>
      </div>

      <div class="page-nav">
        <div class="page-main">
          <div class="nav-left">
            <img class="logo-ico" src="~assets/images/merchants/yb-logo.png"/>
            <span class="nav-text">| 招商入驻</span>
          </div>
          <div class="nav-right">
            <img class="tel-ico" src="~assets/images/merchants/tel-ico.png"/>
            <span class="tel-num">020-2895-5112</span>
          </div>
        </div>
      </div>

    </div>
    <div class="service-advantage">
      <div class="service-item">
        <div class="service-ul">
          <div class="service-list wow fadeIn" :data-wow-duration="(index+1)*.5+'s'"
           v-for="(i, index) in merchantsIndex.advantages.content">
            <img :src=" i.imgUrl"/>
            <div class="service-title">{{ i.advHeader }}</div>
            <p class="service-list-text">{{ i.descript }}</p>
            <p class="service-list-text">{{ i.wrapText }}</p>
          </div>

        </div>
      </div>
    </div>
    <div class="service-rights">

        <img class="common-title" src="~assets/images/merchants/pub-ico07.png"/>
        <img src="~assets/images/merchants/pub-ico08.png"/>

    </div>
    <div class="service-categories">
      <img class="common-title" src="~assets/images/merchants/pub-ico09.png"/>
      <div class="main-content">
        <div class="main-list wow fadeInUp" :data-wow-delay="(index+1)*.1+'s'" data-wow-duration=".3s"
         v-for="(i,index) in merchantsIndex.category.content">
          <div class="main-tit">{{ i.mainList }}</div>
          <img class="main-pd" :src=" i.mainUrl "/>
        </div>
      </div>
    </div>
    <div class="enter-process">
      <img class="common-title" src="~assets/images/merchants/pub-ico25.png">
      <div class="enter-steps">
        <div class="enter-con">
          <div class="enter-wrapCon" v-for="(i,index) in merchantsIndex.process.content">
            <div class="enter-perStep wow flipInX" data-wow-delay=".3s" data-wow-duration=".6s">
              <div class="enter-num">{{ i.num }}</div>
              <div class="enter-text">{{ i.stepsText }}</div>
            </div>
            <div class="enter-next">
              <img src="~assets/images/merchants/pub-ico34.png"/>
            </div>
          </div>
        </div>
        <div class="enter-require">
          <div class="enter-header">入驻资质要求</div>
          <p class="require-text">1.营业执照扫描电子版或照片</p>
          <p class="require-text">2.企业法人身份证正反面扫描电子版或照片</p>
          <p class="require-tips">*点击入驻，留下您的联系方式，我们的招商经理会在3个工作日内联系您</p>
        </div>
      </div>
    </div>
    <div class="standard-cost">
      <img class="common-title" src="~assets/images/merchants/pub-ico31.png">
      <div class="standard-content">
        <p class="trading-margin">交易保证金：<span class="delete-con">10,000~50,000</span>元 <span class="marginL">技术服务费：<span class="delete-con">7,200~12,000</span>元</span></p>
        <p class="frontFree">入驻前 500名 供应商免保证金和技术服务费</p>
        <div class="enter-btn-con wow heartBeat" data-wow-duration="1s" @click="routeToOut(URL.jumpSeller+'/seller/enter/register?staffId='+staffId+'&isShow='+isShow)">
          <img class="enter-img" src="~assets/images/merchants/pub-ico01.png"/>
        </div>
      </div>
    </div>
    <div class="company-item">
      <div class="company-info">
        <div class="company-left-con">
          <div class="company-address">
            <p class="address-detail">广东省广州市科学城彩频路6号</p>
            <p class="company-name">广州市一呼百应网络技术股份有限公司</p>
          </div>
          <div class="company-ico">
            <img src="~assets/images/merchants/pub-ico32.png"/>
          </div>
        </div>
        <div class="company-right-con">
          <span class="company-tel">020-2895-5112</span>
          <img src="~assets/images/merchants/pub-ico33.png"/>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="footer-record"> ©2005-2018 Youboy 粤B2-20120239 粤ICP备09180448号-1 粤公网安备44060402000131号
      </div>
    </div>

    <div class="right-fixed-meau">

      <div class="fixed-item-con">
        <div class="suspend-meau-item program-tab" @mouseover="handleMouseover('wx')" @mouseout="handleMouseout('wx')">
          <div class="tab-ico">
            <img src="~assets/images/merchants/pub-ico36.png"/>
          </div>
          <span class="tab-text">小程序</span>
        </div>
        <div class="fixed-img" :class="{'enter': showWxCode}">
          <img src="~assets/images/merchants/pub-ico39.png"/>
          <div class="tab-tips">微信扫一扫进入</div>
          <div class="tab-tips">一呼百应小程序</div>
        </div>
      </div>
      <div class="fixed-item-con">
        <div class="suspend-meau-item download-tab" @mouseover="handleMouseover('app')" @mouseout="handleMouseout('app')">
          <div class="tab-ico">
            <img src="~assets/images/merchants/pub-ico37.png"/>
          </div>
          <span class="tab-text">APP下载</span>
        </div>
        <div class="fixed-img" :class="{'enter': showAppCode}">
          <img src="~assets/images/merchants/pub-ico40.png"/>
          <div class="tab-tips">微信扫一扫</div>
          <div class="tab-tips">下载一呼百应APP</div>
        </div>
      </div>
      <div class="fixed-item-con" @click="clickConsult()">
        <div class="suspend-meau-item online-tab" >
          <div class="tab-ico">
            <img src="~assets/images/merchants/pub-ico41.png"/>
          </div>
          <span class="tab-text">在线咨询</span>
        </div>
      </div>
      <div class="fixed-item-con">
        <div class="suspend-meau-item enter-click"  @click="routeToOut(URL.jumpSeller+'/seller/enter/register?staffId='+staffId+'&isShow='+isShow)">
          <div class="tab-ico">
            <img src="~assets/images/merchants/pub-ico35.png"/>
          </div>
          <span class="tab-text">点击入驻</span>
        </div>

      </div>
    </div>
  </div>
</template>
<script>
if (process.browser) {
  var { WOW } = require('wowjs')
  require('wowjs/css/libs/animate.css')
}
import merchantsIndex from '@/jsons/merchants-index'
import Headbar from '@/components/Layouts/Headbar'
export default {
  name: 'Merchants',
  components: {
    Headbar,
  },
  data() {
    return {
      showWxCode: false,
      showAppCode: false,
      timer: null,
      merchantsIndex: merchantsIndex,
      staffId: this.getUrlParams('staffId'),
      isShow: this.getUrlParams('isShow'),
    }
  },
  mounted() {
    if(process.browser){
      new WOW().init({
        offset: 150,
      });
    }
  },
  created() {

  },
  methods: {
    handleMouseover(type) {
      if(type == 'wx'){
        this.showWxCode = true;
        this.showAppCode = false;
      }else{
        this.showAppCode = true;
        this.showWxCode = false;
      }
      clearTimeout(this.timer);
    },
    handleMouseout(type) {
      clearTimeout(this.timer);
      if(type == 'wx'){
        this.timer = setTimeout(() => {
          this.showWxCode = false;
        }, 300)
      }else{
        this.timer = setTimeout(() => {
          this.showAppCode = false;
        }, 300)
      }
    },
    clickConsult() {
      if (process.browser) {
        window.location.href = 'tencent://message/?uin=382093872&Site=&menu=yes'
      }
    },
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/pages/merchants.scss';
</style>
